<template>
     <div class="jx-big">
        <div class="jx-info">
            <h3 class="fl">申请账号</h3>
        </div>
        <div class="forms">
            <el-form :model="formDtae" :rules="rules" ref="formDtae" >
                <el-form-item label="学校"  prop='name'>
                    <el-input v-model="formDtae.name"  maxlength="30" placeholder="请输入学校名称" @input="dataInput"></el-input>
                     <p style=" position:absolute;  left: 290px; bottom: -27px;">{{formDtae.titnum}}/30</p>
                </el-form-item>
                <el-form-item label="省份" class='fl' prop='classinfo' >
                    <el-select v-model="formDtae.classinfo"  placeholder="请选择省份">
                        <el-option
                        v-for="item in formDtae.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <div style="clear:both; margin-bottom:12px;">
                    <el-form-item label="申请码"  prop='code' >
                        <el-input v-model="formDtae.code"  placeholder="请输入申请码"></el-input>
                    </el-form-item>
                </div>
                <el-form-item label="手机号" prop="telephoneNumber"  >
                    <el-input v-model.number="formDtae.telephoneNumber" maxlength="11"  placeholder="请输入手机号码"></el-input>
                </el-form-item>
                <div style="clear:both" v-if="formDtae.checkLists.length>0">
                    <el-form-item label="课程展示" prop="checkList"  >
                         <div class="checkList" >
                            <el-checkbox-group v-model="formDtae.checkList">
                                <el-checkbox  v-for="(item,index) in formDtae.checkLists" :label="item.id" :key="index" name="checkList">{{item.keyValue}}</el-checkbox>
                            </el-checkbox-group>
                        </div>

                    </el-form-item>
                </div>
                <div class="button-style savefn" @click="saveFn('formDtae')" >保 存</div>
            </el-form>
        </div>
        <el-dialog :close-on-click-modal="false" title="申请账号" :visible.sync="dialogFormVisible" width="550px" >
            <div id="spanid">
                <p>{{projectname}}</p>
                <p>地址：{{windowUrl}}</p>
                <p>教师账号：{{Tcode}}  密码：{{Tpassword}}</p>
                <p>学生账号：{{Scode}}  密码：{{Spassword}}</p>
            </div>
            <div class="cpoy">
                 <button @click="savetext"  class="button-style btn"> 复 制</button>
            </div>
         </el-dialog>
    </div>
</template>

<script>
    import NotificationNav from '@/components/NotificationNav.vue'
    export default {
        components: {
            NotificationNav
        },
        data () {
            return {
                dialogFormVisible:false,
                windowUrl:'',
                //id集合
                idList:[],
                 formDtae:{
                     //添加课程展示
                     telephoneNumber:'',
                     checkLists:[],
                     checkList:[],
                      name:'',
                      code:'',
                      classinfo:'',
                      titnum:0,
                      options:[{
                            value: '1',
                            label: '北京'
                            }, {
                            value: '2',
                            label: '天津'
                            },
                            {
                            value: '3',
                            label: '重庆'
                            },
                            {
                            value: '4',
                            label: '河北'
                            },
                            {
                            value: '5',
                            label: '山西'
                            },
                            {
                            value: '6',
                            label: '辽宁'
                            },
                            {
                            value: '7',
                            label: '吉林'
                            },
                            {
                            value: '8',
                            label: '黑龙江'
                            },
                            {
                            value: '9',
                            label: '江苏'
                            },
                            {
                            value: '10',
                            label: '浙江'
                            },
                            {
                            value: '11',
                            label: '安徽'
                            },
                            {
                            value: '12',
                            label: '福建'
                            },
                            {
                            value: '13',
                            label: '江西'
                            },
                            {
                            value: '14',
                            label: '山东'
                            },
                            {
                            value: '15',
                            label: '河南'
                            },
                            {
                            value: '16',
                            label: '湖南'
                            },
                            {
                            value: '17',
                            label: '湖北'
                            },
                            {
                            value: '18',
                            label: '广东'
                            },

                            {
                            value: '19',
                            label: '四川'
                            },
                            {
                            value: '20',
                            label: '贵州'
                            },
                            {
                            value: '21',
                            label: '云南'
                            },
                            {
                            value: '22',
                            label: '陕西'
                            },
                            {
                            value: '23',
                            label: '甘肃'
                            },
                            {
                            value: '24',
                            label: '青海'
                            },
                            {
                            value: '25',
                            label: '内蒙古'
                            },
                            {
                            value: '26',
                            label: '广西'
                            },
                            {
                            value: '27',
                            label: '西藏'
                            },
                            {
                            value: '28',
                            label: '宁夏'
                            },
                            {
                            value: '29',
                            label: '新疆维吾尔自治区'
                            },
                            {
                            value: '30',
                            label: '新疆'
                            },
                            {
                            value: '31',
                            label: '上海'
                            },
                            {
                            value: '32',
                            label: '海南'
                            },
                        ]
                 },
                 //老师账号：
                 Tcode:'',
                 //老师密码
                 Tpassword:'',
                 //学生账号
                 Scode:'',
                 //学生密码
                 Spassword:'',
                 //项目名字
                 projectname:'',
                 rules: {
                    name: [
                        { required: true, message: '请输入学校名称', trigger: 'blur' }
                    ],
                    code: [
                        { required: true, message: '请输入申请码', trigger: 'blur' },
                    ],
                    classinfo: [
                        { required: true, message: '请选择省份', trigger: 'change' }
                    ],
                    checkList:[
                        { type: 'array', required: true, message: '请选择课程', trigger: 'change' }
                    ],
                    telephoneNumber:[
                        { type: 'number', required: true, message: '请输入手机号' },
                    ]

                 }
            }
        },
        created () {
            this.courseInfo()
        },
        methods: {
            //添加课程体系
            courseInfo(){
                 let self = this
                self.$http.get('/tes/unauthorized/config?keys=schoolType').then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                         if(res.data.schoolType != undefined){
                             self.formDtae.checkLists = res.data.schoolType
                             for(var i= 0; i<res.data.schoolType.length; i++){
                                self.idList.push(res.data.schoolType[i].id)
                             }
                         }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //信息字数
            dataInput(){
                var txtVal = this.formDtae.name.length;
                this.formDtae.titnum =  txtVal++
                if(this.formDtae.titnum.length>=30){
                     return
                }
            },
            //保存
            saveFn(formDtae){
                //过滤得到非选中项
                let difference = this.idList.concat(this.formDtae.checkList).filter(v =>  this.idList.includes(v) && !this.formDtae.checkList.includes(v))
                this.$refs[formDtae].validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '正在保存中...',
                            spinner: 'el-icon-loading',
                            background: 'rgba(0, 0, 0, 0.7)'
                        })
                        this.$http.post('/tes/user/application',{
                            telephoneNumber:this.formDtae.telephoneNumber,
                            province: this.formDtae.classinfo,
                            schoolName: this.formDtae.name,
                            invitationCode: this.formDtae.code,
                            courseDirectionHideIds:difference
                        }).then((response) => {
                            let res = response.data
                            if(res.code == '200') {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                                this.dialogFormVisible = true
                                this.formDtae.titnum = 0
                                this.projectname = res.data.config.projectName[0].keyValue
                                //赋值教师信息
                                this.Tcode = res.data.teacherUserInfo.userNumber
                                this.Tpassword = res.data.teacherUserInfo.password
                                //赋值学生信息
                                this.Scode = res.data.studentUserInfo.userNumber
                                this.Spassword = res.data.studentUserInfo.password
                                //赋值url信息
                                this.windowUrl = 'http://' + window.location.host + res.data.config.indexUrl[0].keyValue;
                                this.$refs[formDtae].resetFields()
                                loading.close()
                            }else{
                                this.$message.error(res.message)
                                loading.close()
                            }
                        })
                    }
                })

            },
            //复制
            savetext(){
               var Url2=document.getElementById("spanid").innerText;
                var oInput = document.createElement('textarea');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display='none';
            }

        }
    }
</script>
<style scoped>
    .el-checkbox-group{
        margin-top: 45px;
    }
   .el-input>>>.el-input__inner{
        width: 280px;
        height: 38px;
        line-height: 38px;
    }
   .el-select>>>.el-input__inner{
       width: 280px;
        height: 38px;
        line-height: 38px;
   }

    .el-form-item{
        margin-bottom: 60px;
    }
    .el-form>>>.el-form-item__error{
        margin-top: 45px;
    }

</style>
<style lang="scss" scoped>
@import "./../../../styles/layout/color_variables";
.jx-big {
    padding-left: 50px;
    padding-top: 20px;
    .jx-info{
        overflow: hidden;
        &>h3{
            height: 32px;
            line-height: 32px;
            font-size: $fs18
        }
    }
    .forms{
        margin: 28px 0;
        .savefn{
            margin:20px 30px 20px 0;
        }
    }
    #spanid{
        text-align: center;
        &>p{
            line-height: 28px;
        }
    }
    .cpoy{
        text-align: center;
        margin-top: 5px;
          .btn{
              margin-top: 5px
            }
    }

}
</style>
